<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html">
    <body>

        <ui:composition template="./MainTemplate.xhtml">

            <ui:define name="title">
                Drivers Page
            </ui:define>

            <ui:define name="head">
                <script type="text/javascript">
                    ( function($) {
                        // Make tab item 'driver' on menu is active
                        $(document).ready( function() { 
                            $('#driver').addClass("active"); 
                            //show advance search
                            $('.adv-click').click(function() {
                                $('.simple-search').hide(350);
                                $('.adv-search').show(350);
                            });
                        });
                        
                    }) ( jQuery );
                </script>
                <style type="text/css">
                    .text_white2 {
                        color: #FFFFFF;
                        font-family: Tahoma;
                        font-size: 12px;
                        font-weight: bold;
                        padding-top: 1px;
                        text-decoration: none;
                    }
                    .list-tcat{
                        background: url('img/free_listing.png') transparent no-repeat;
                    }
                    .list-tcat span{
                        margin-left: 60px;
                    }
                    .list-driver{
                        margin-bottom: 7px;
                        border: 1px solid #D6D7D7;
                        position: relative;
                    }
                    .list-driver th{
                        font-weight: bold;
                        text-align: left;
                    }
                </style>
            </ui:define>
            <ui:define name="left">
                <h:form id="form-driver">
                    <fieldset>
                        <legend><h1 class="title">Search Drivers</h1></legend>
                        <div class="simple-search">
                            <h:panelGrid columns="2">
                                <p:selectOneMenu id="city" value="#{driversController.citySearch}" style="width: 150px">
                                    <f:selectItem itemLabel="Choose City" itemValue="" />  
                                    <f:selectItems value="#{driversController.listCity}" />  
                                </p:selectOneMenu> 
                                <p:commandButton icon="ui-icon-search" update="list" value="Go" 
                                                 style="height: 26px" actionListener="#{driversController.searchByCity}"/> 
                            </h:panelGrid>
                        </div>
                        <div class="adv-click" style="margin-left: 5px;font-weight: bold;cursor: pointer">Advance Search</div>
                        <div class="adv-search" style="display: none">
                            <h:panelGrid columns="3">
                                <p:inputText id="keyword" value="#{driversController.keyword}" style="height: 22px"/>
                                <p:selectOneMenu id="type" value="#{driversController.findWhere}" style="width: 150px">
                                    <f:selectItem itemLabel="Driver Name" itemValue="Name" /> 
                                    <f:selectItem itemLabel="Contact Person" itemValue="ContactPerson" /> 
                                    <f:selectItem itemLabel="Address" itemValue="Address" /> 
                                    <f:selectItem itemLabel="City" itemValue="City" /> 
                                    <f:selectItem itemLabel="Mobile" itemValue="Mobile" /> 
                                    <f:selectItem itemLabel="Experience" itemValue="Experience" />
                                    <f:selectItem itemLabel="Telephone" itemValue="Telephone" /> 
                                </p:selectOneMenu>
                                <p:commandButton icon="ui-icon-search" update="list" value="Advance Search" 
                                                 style="height: 26px" actionListener="#{driversController.advanceSearch}"/>   
                            </h:panelGrid>
                        </div>
                        <h4 style="text-align: justify">Website provides listing of drivers from all over Vietnam. driver can find the driver according to their need and Driver can also be listed here by filling <a href="RegisterDriver.xhtml">Registration Form</a>.</h4>
                    </fieldset>
                    <fieldset>
                        <legend><h1 class="title">Drivers List</h1></legend>
                        <h:panelGrid id="list" columns="1" cellpadding="10" cellspacing="" style="width: 100%;position: relative" >
                            <ui:repeat value="#{driversController.paginator.model}" var="d" >
                                <table width="100%" cellspacing="0" cellpadding="0" border="0" class="list-tcat">
                                    <tbody>
                                        <tr>
                                            <td width="32%" style="padding-right:12px;">
                                                <span class="text_white2">Driver</span>
                                            </td>
                                            <td align="right" width="73%"></td>
                                        </tr>
                                    </tbody>
                                </table>
                                <table width="100%" cellspacing="5" cellpadding="0" bgcolor="#efefef" border="0" class="list-driver">
                                    <tbody>
                                        <tr>
                                            <th width="23%">Driver Name </th>
                                            <td width="5%">:</td>
                                            <td width="72%">#{d.name}</td>
                                        </tr>
                                        <tr>
                                            <th>Contact Person</th>
                                            <td>:</td>
                                            <td>#{d.contactPerson}</td>
                                        </tr>
                                        <tr>
                                            <th>Address</th>
                                            <td>:</td>
                                            <td>#{d.address}</td>
                                        </tr>
                                        <tr>
                                            <th>City </th>
                                            <td>:</td>
                                            <td>#{d.city}</td>
                                        </tr>
                                        <tr>
                                            <th>Mobile</th>
                                            <td>:</td>
                                            <td>#{d.mobile}</td>
                                        </tr>
                                        <tr>
                                            <th>Telephone</th>
                                            <td>:</td>
                                            <td>#{d.telephone}</td>
                                        </tr>
                                        <tr>
                                            <th>Experience</th>
                                            <td>:</td>
                                            <td>#{d.experience}</td>
                                        </tr>
                                        <tr>
                                            <th>Description</th>
                                            <td>:</td>
                                            <td>#{d.description}
                                                <p:commandButton value="Enquiry" styleClass="button-add" ajax="false" 
                                                                 action="#{enquiryController.enquiryDriver(d.id)}" style="position: absolute;bottom: 7px;right:5px;"/>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </ui:repeat>
                            <p:panel id="page" style="border: 0px;text-align: center">   
                                <p:commandButton update="list" icon="ui-icon-circle-triangle-w" actionListener="#{driversController.paginator.prev}"/>
                                <h:outputText value=" #{driversController.paginator.pageIndex} / #{driversController.paginator.pages}  &nbsp;" style="font-weight: bold;font-size: 14px"/>
                                <p:commandButton update="list" icon="ui-icon-circle-triangle-e" actionListener="#{driversController.paginator.next}"/>
                                <h:inputHidden value="#{driversController.paginator.pageIndex}"/>
                            </p:panel>
                        </h:panelGrid>
                    </fieldset>
                </h:form>
            </ui:define>
            <ui:define name="right">
            </ui:define>

        </ui:composition>

    </body>
</html>
